import { Component } from 'react';

// 导入 CSS Modules 样式
import styles from './Controlled.module.css';
console.log( 'css modules: ' , styles );

class Controlled extends Component {
  // 等号前是 实例属性 的名称，等号后是 属性值 
  state = {
    username: 'sanfeng',
    gender: 'female',
    hobby: ['sleep'],
    hometown: 'jiangnan',
    introduce: ''
  }
  // 等号前是 实例属性 的名称，等号后是 属性值
  changeUsername = (evt) => {
    // 修改状态
    this.setState( { username: evt.target.value } );
  }
  changeGender = (evt) => {
    this.setState( { gender: evt.target.value } );
  }
  changeHobby = (evt) => {
    // 从组件状态中获取原来的数据
    let array = this.state.hobby;
    // 通过合成事件获取事件源
    const target = evt.target ;
    console.log( target.checked );
    // 对于 radio 和 checkbox 来说 checked 取值为 true 表示被选中
    if( target.checked ) {
        array.push( target.value );
    } else {
        let index = array.findIndex( e => e === target.value );
        if( index !== -1 ) {
            array.splice( index , 1 );
        }
    }
    console.log( array );
    this.setState( { hobby: array } );
  }
  changeHometown = (evt) => {
    const target = evt.target;
    /*
    // 获得被选择 option 的索引
    const index = target.selectedIndex;
    // 根据 option 索引 获取 option 元素
    const option = target[ index ];
    // 获得被选中 option 的值
    const value = option.value ;
    */
    // 通过 select 直接获取更改后的取值
    const value = target.value;
    this.setState( { hometown: value } );
  }
  changeIntroduce = (evt)=>{
    // 获得 textarea 中的内容
    let content = evt.target.value ;
    this.setState( { introduce: content } );
  }
  render(){
    const { username, gender, hobby, hometown, introduce } = this.state ;
    return (
      <div className={ styles.wrapper }>
          <form>
              <div className="form-item">
                  <span>用户名:</span>
                  <input type="text" name="username" value={ username } onChange={ this.changeUsername } />
              </div>
              <div className="form-item">
                  <span>性别:</span>
                  <input type="radio" name="gender" value="male" onChange={ this.changeGender } checked={ gender === 'male' }  id="gender-male"/>
                  <label htmlFor="gender-male">靓仔</label>
                  <input type="radio" name="gender" value="female" onChange={ this.changeGender } checked={ gender === 'female'} id="gender-female"/>
                  <label htmlFor="gender-female">靓妹</label>
              </div>
              <div className="form-item">
                  <span>爱好:</span>
                  <input type="checkbox" name="hobby" value="eat" onChange={ this.changeHobby } checked={ hobby.includes('eat') } id="eat"/>
                  <label htmlFor="eat">吃</label>
                  <input type="checkbox" name="hobby" value="eat-ji" onChange={ this.changeHobby } checked={ hobby.includes('eat-ji') }id="eat-ji"/>
                  <label htmlFor="eat-ji">吃鸡</label>
                  <input type="checkbox" name="hobby" value="sleep" onChange={ this.changeHobby } checked={ hobby.includes('sleep') }id="sleep"/>
                  <label htmlFor="sleep">睡</label>
              </div>
              <div className="form-item">
                  <span>籍贯:</span>
                  <select name="hometown" value={hometown} onChange={ this.changeHometown }>
                      <option value="jiangdong">江东</option>
                      <option value="jiangnan">江南</option>
                      <option value="jiangbei">江北</option>
                  </select>
              </div>
              <div className="form-item">
                  <span>介绍:</span>
                  <textarea name="introduce" value={ introduce } onChange={ this.changeIntroduce }/>
              </div>
          </form>
          <ul>
              <li>username: { username }</li>
              <li>gender: { gender }</li>
              <li>hobby: { hobby.toString() }</li>
              <li>hometown: { hometown }</li>
              <li>introduce: {introduce} </li>
          </ul>
      </div>
    )
  }
}

export default Controlled ;